<template>
  <Header />
  <div class="rightbutton">
    <div
      @click="changezm(item, index)"
      v-for="(item, index) in data.zmlist"
      :key="index"
      class="rightitem"
    >
      <img v-if="item.show == false" :src="item.icon" alt="" class="imgtt" />
      <img v-else :src="item.activeicon" alt="" class="imgtt" />
      <div>{{ item.text }}</div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottomback">
      <div
        v-for="(item, index) in data.bottomdata"
        :key="index"
        :class="['buttoncss', { activebutton: item.show == true }]"
        @click="clickbutton(item, index)"
      >
        <div>{{ item.text }}</div>
        <div class="buttonbuttonlist" v-show="item.showlabel == true">
          <div
            v-for="(el, num) in item.selectlist"
            :key="num"
            :class="['elitem', { activeelitem: el.show == true }]"
            @click.stop="elclick(el, index, item)"
          >
            {{ el.text }}
          </div>
        </div>
      </div>
      <img src="@/assets/image/houtai.png" alt="" class="houtaixzbutton" />
      <!-- <img
          src="@/assets/image/houtaixz.png"
          alt=""
          class="houtaixzbutton"
        /> -->
      <div class="bottomecharts" v-show="data.bottomdata[3].showlabel">
        <div class="shuiweitext">水位</div>
        <el-slider
          class="self_slider"
          v-model="shuiwei"
          vertical
          :min="0"
          :max="50"
          :marks="guideMarks"
          :show-tooltip="true"
        />
        <!-- <MyCharts
            :dataSource="data.dataSource2"
            canvasWidth="4.79167vw"
            canvasHeight="8.90625vw"
          ></MyCharts> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "../home/header.vue";
import { ref, reactive, computed, h } from "vue";
import { useRouter } from "vue-router";
let shuiwei = ref(20);
const router = useRouter();
let guideMarks = computed(() => {
  let marks = {};
  for (let i = 0; i <= 160; i++) {
    if (i % 10 == 0) {
      marks[i] = i + "";
    } else if (i % 2 == 0) {
      marks[i] = {
        style: {
          color: "#ccc",
        },
        label: h("span", "|"),
      };
    }
  }
  return marks;
});
let data = reactive({
  zmlist: [
    {
      text: "闸1",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
    },
    {
      text: "闸2",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
    },
    {
      text: "闸3",
      show: false,
      icon: require("@/assets/image/zmgb.png"),
      activeicon: require("@/assets/image/zmdk.png"),
    },
  ],
  bottomdata: [
    {
      text: "场景切换",
      show: false,
      showlabel: false,
      selectlist: [
        { text: "主坝", show: false },
        { text: "泄洪道", show: false },
        { text: "管理处", show: false },
        { text: "水电站", show: false },
        { text: "输水洞", show: false },
      ],
    },
    {
      text: "设备管理",
      show: false,
      showlabel: false,
      selectlist: [
        { text: "泄洪闸", show: false },
        { text: "水雨情", show: false },
        { text: "渗流计", show: false },
        { text: "渗压计", show: false },
        { text: "摄像头", show: false },
      ],
    },
    {
      text: "巡检展示",
      show: false,
      showlabel: false,
      selectlist: [
        { text: "巡检漫游", show: false },
        { text: "巡检线路", show: false },
      ],
    },
    {
      text: "淹没模拟",
      showlabel: false,
      show: false,
    },
  ],
});
const clickbutton = (item, index) => {
  item.showlabel = !item.showlabel;
  data.bottomdata.forEach((el, num) => {
    el.show = false;
  });
  item.show = true;
  if (item.text == "淹没模拟") {
    router.push("/ymmn");
  }
};
const elclick = (el, num, item) => {
  data.bottomdata[num].selectlist.forEach((item, index) => {
    item.show = false;
  });
  el.show = true;
  if (item.text == "巡检展示") {
    toggle();
  }
  if (el.text == "水电站") {
    window.ue4("tocameratow");
  } else if (el.text == "输水洞") {
    window.ue4("tocameraone");
  }
};
const changezm = (item, index) => {
  item.show = !item.show;
};
</script>

<style lang="scss" scoped>
.rightbutton {
  //   width: 100px;
  //   height: 100px;
  //   border: 1px solid red;
  position: absolute;
  top: 352px;
  right: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  .rightitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 14px;
    .imgtt {
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
  }
}
.bottom {
  width: 100%;
  height: 120px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: url("@/assets/image/bottomback.png") 0px 0px no-repeat;
  background-size: cover;
  z-index: 1;
  .bottomback {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 960.58px;
    height: 88px;
    background: url("@/assets/image/z25.png") 0px 0px no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    gap: 24px;
    .buttoncss {
      position: relative;
      width: 146.25px;
      height: 28.58px;
      // border: 1px solid red;
      margin-top: 16px;
      text-align: center;
      line-height: 28.58px;

      font-family: "Source Han Sans CN";
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      // line-height: 25px;
      letter-spacing: 1px;
      // text-align: left;
      font-style: normal;
      text-transform: none;
      background: url("@/assets/image/button.png") 0px 0px no-repeat;
      background-size: cover;
      cursor: pointer;
      .buttonbuttonlist {
        width: 104px;
        // height: auto;
        position: absolute;
        top: -50%;
        left: 50%;
        transform: translate(-50%, -100%);
        // color: #000000;
        display: flex;
        flex-direction: column;
        gap: 1px;
        .elitem {
          width: 100%;
          height: 32px;
          line-height: 32px;
          text-align: center;
          background: url("@/assets/image/jx28.png") 0px no-repeat;
          background-size: cover;
        }
        .activeelitem {
          background: url("@/assets/image/jx29.png") 0px no-repeat;
          background-size: cover;
        }
      }
    }
    .activebutton {
      background: url("@/assets/image/activebutton.png") 0px 0px no-repeat;
      background-size: cover;
    }
    .houtaibutton {
      width: 18.46px;
      height: 18.42px;
      position: absolute;
      top: 44px;
      left: 471px;
    }
    .houtaixzbutton {
      width: 18.46px;
      height: 18.42px;
      position: absolute;
      top: 68px;
      left: 463px;
    }
    .bottomecharts {
      position: absolute;
      top: -168px;
      right: 181px;
      width: 92px;
      height: 171px;
      background: rgba(29, 68, 94, 0.88);
      border-radius: 9px 9px 9px 9px;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      // justify-content: center;
      text-align: center;
      .shuiweitext {
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        margin-top: 5px;
      }
      .self_slider {
        height: 120px;
        // width: 10px;
        margin-top: 10px;
      }
    }
  }
}
::v-deep {
  .el-input .el-input__icon {
    display: none;
  }
  .datepicker {
    width: 30%;
    height: 20px;
  }

  // .picker-popper {
  // background: #000000 !important;
  // margin-left: -55px;
  // }
  .datepicker .el-input__inner {
    color: #ffffff;
    font-size: 12px;
  }
  .datepicker .el-input__wrapper {
    border-radius: 10px;
  }
  .custom-progress .el-progress-circle__track {
    stroke: #0076c9; /* 设置进度条的背景颜色 */
  }
  .el-progress {
    width: 70px;
    height: 70px;
  }
  .custom-progress .el-progress-circle {
    width: 70px !important;
    height: 70px !important;
  }
  .el-progress__text {
    color: #ffffff !important;
    font-size: 16px !important;
    font-family: "HuXiaoBo-NanShen";
  }
  //   .table {
  //     background: transparent !important;
  //   }
  .el-table td,
  .el-table th,
  .el-table tr {
    background: transparent !important;
    // border: none;
    color: #ffffff;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    // border-bottom: 1px solid #00a8df !important;
    // border-right: 1px solid #00a8df !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    height: 35px !important;
  }
  .el-table td.el-table__cell:last-child {
    border-right: 0px !important;
  }
  .el-table th.el-table__cell.is-leaf:last-child {
    border-right: 0px !important;
  }
  .el-table td.el-table__cell:first-child {
    border-right: 0px !important;
  }
  .el-table th.el-table__cell.is-leaf:first-child {
    border-right: 0px !important;
  }
  .el-table__inner-wrapper:before {
    height: 0px;
  }
  .el-table__header-wrapper {
    background: #21576d !important;
    height: 35px !important;
    // border-radius: 4px 4px 0px 0px;
  }
  .el-table tr:nth-child(2n) {
    // border-bottom: 1px solid #00a8df !important;
    background: rgba(33, 87, 109, 0.49) !important;
    // opacity: 0.49 !important;
  }
  .cell {
    padding: 0px !important;
  }
  .el-switch__core .el-switch__action {
    background-color: #2d7a99;
  }

  .self_slider .el-slider__marks-text {
    margin-left: 10px;
    color: #ffffff;
  }
  .self_slider .el-slider__marks-text span {
    display: inline-block;
    height: 8px !important;
    // transform-origin: center;
    overflow: hidden;
    transform: translateX(-5px) rotate(90deg);
  }
  // .el-slider__runway {
  //   height: 30px;
  // }
  .self_slider .el-slider__runway .el-slider__bar {
    // height: 30px;
    width: 17px;
    background: #46a5d9;
    border-radius: 0px;
  }
  // .el-slider__runway .el-slider__button-wrapper {
  //   top: -2px;
  // }
  .self_slider .el-slider__stop {
    display: none;
  }
  .self_slider .el-slider__button {
    // display: none;
    visibility: hidden;
  }
  .self_slider .el-slider__marks {
    width: 17px !important;
  }
  .self_slider {
    --el-slider-height: none;
    --el-slider-border-radius: 0px;
  }
}
</style>